<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>李英小可爱</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <!--<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>


<audio id="myAudio" controls autoplay>
  <source src="./music.mp3" type="audio/ogg" >
  <source src="./music.mp3" type="audio/mpeg">
</audio>


<canvas class="canvas"></canvas>

<div class="help">?</div> 

<div class="ui">
  <input class="ui-input" type="text"  />
  <span class="ui-return">↵</span>
</div>

<div class="overlay">
  <div class="tabs">
    <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

    <div class="tabs-panels">
      <ul class="tabs-panel commands">
        <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

        <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
      </ul>

      <div class="tabs-panel ui-details">
        <div class="ui-details-content">
          <h1>Shape Shifter</h1>
        </div>
      </div>

      <div class="tabs-panel ui-share">
        <div class="ui-share-content">
          <h1>Sharing</h1>
          <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

  <script>

    function audioAutoPlay(id){
      var audio = document.getElementById(id);
      audio.play();
      document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
      }, false);
    }
    audioAutoPlay('myAudio');
  </script>




</div>
</body>
</html>